<template>  
    <!-- 组件的结构 -->
     <div class="demo">
        <h1>学校名称:{{name}}</h1>
        <h1>学校地址:{{address}}</h1>
        <button @click="showname">点我显示学校名称</button>
    </div>
</template>
<script>    
    //  组件交互的代码
    export default  {
        name: "SchoolInfo",
        data() {
            return {
                name: "尚硅谷",    // 学校名称
                address: "北京市海淀区西二旗"  // 学校地址
            }
        },
        methods: {
            showname() {
                alert(this.name);
            }
        }
    };

    //默认暴露组件
    // export default SchoolInfo;
</script>
<style>    
    /* 组件的样式 */
    .demo {
        background-color:orange;
    }
</style>